<!-- 顶部导航栏 - 单元格 -->
<template>
  <view class="ss-flex ss-col-center">
    <!-- 类型一： 文字 -->
    <view v-if="data.type === 'text'" class="nav-title inline" :style="[{ color: data.textColor, width: width }]">
      {{ data.text }}
    </view>
    <!-- 类型二： 图片 -->
    <view
      v-if="data.type === 'image'"
      :style="[{ width: width }]"
      class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
      @tap="sheep.$router.go(data.url)"
    >
      <image class="nav-image" :src="sheep.$url.cdn(data.imgUrl)" mode="aspectFit"></image>
    </view>
    <!-- 类型三： 搜索框 -->
    <view v-if="data.type === 'search'" class="ss-flex-1" :style="[{ width: width }]">
      <s-search-block
        :placeholder="data.placeholder || '搜索关键字'"
        :radius="data.borderRadius"
        el-background="#fff"
        :height="height"
        :width="width"
        @click="sheep.$router.go('/pages/index/search')"
      ></s-search-block>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep'
import { computed } from 'vue'

// 接收参数
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  width: {
    type: String,
    default: '1px',
  },
})

const height = computed(() => sheep.$platform.capsule.height)
</script>

<style lang="scss" scoped>
.nav-title {
  font-size: 36rpx;
  color: #333;
  text-align: center;
}

.menu-icon-wrap {
  .nav-image {
    height: 24px;
  }
}
</style>
